

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="/styles/campaign.css">
    <script type="text/javascript">
        localPath="creative"
    </script>
</head>
<body>
<!-- 新建广告创意弹窗 -->
<div id="newCreatives" class="modal aside  top  fade" tabindex="-1" role="dialog" >

</div>

<div class="bg-white box-shadow pos-rlt"  >

    <div class="p-h-md p-v bg-white box-shadow pos-rlt">
        <h3 class="no-margin have-btn-title">广告管理</h3>
        <button id="newCreativesButton"  type="button" class="btn btn-sm btn-success ng-click-active pull-right pull-right"  data-placement="top" data-animation="am-slide-top aside-open-backdrop"  data-container="body"   bs-aside="aside"
                <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>
        ><i class="glyphicon glyphicon-plus"></i>
            新建创意
        </button>
    </div>
</div>

<form id="creativesForm">
    <div class="p-md clear">
        <div class="panel-body advert-select" style="padding-top:0">
            <select name="crtSizeMediumMenuId"  id="crtSizeMediumMenuId" class="form-control w">
                <option value="0">全部尺寸</option>
                <c:forEach items="${form.crtSizeMediumMenus }" var="crtSizeMediumMenu">
                    <option value="${crtSizeMediumMenu.crtSize}"  <c:if test="${form.crtSizeMediumMenuId == crtSizeMediumMenu.crtSize }"> selected="selected"</c:if>>${crtSizeMediumMenu.crtSizeDetail}</option>
                </c:forEach>
            </select>
            <input id="crtSizeMediumMenuIdValue" type="hidden"  value="${form.crtSizeMediumMenuId }"/>
        </div>

        <!-- 新增 -->
      <c:forEach items="${form.page.content }" var="frontSelfOperateCreative">
        <c:if test="${frontSelfOperateCreative.type == 1 }">
        <div class="cy-item col-sm-4">
            <div  class="panel b-a cy-materials-item">
                <div class="panel-heading bg text-lt"  >
                    <span>${frontSelfOperateCreative.creativeName}</span>
                    <span class="pull-right del-icon-cy">
                        <a  href="javascript:delectCreative(${frontSelfOperateCreative.id })" <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>>
                            <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                        </a>
                    </span>
                </div>
                <div class="content">
                    <div class="sb">
                        <a href="${frontSelfOperateCreative.trademarkPath }"  target="_blank" >
                        <img src="${frontSelfOperateCreative.trademarkShowPath}" class="sb-icon">
                        </a>
                        <span class="sb-name">${frontSelfOperateCreative.trademarkName}</span>
                    </div>
                    <p class="cy-txt">
                            ${frontSelfOperateCreative.creativeCopywriter}
                    </p>
                   <c:choose>
                       <c:when test="${empty frontSelfOperateCreative.bannerPath2 }">
                            <div class="cy-img-list one">
                                <a href="${frontSelfOperateCreative.bannerPath1 }"  target="_blank" >
                                    <img src="${frontSelfOperateCreative.bannerShowPath1}">
                                </a>
                            </div>
                       </c:when>
                       <c:otherwise>
                           <div class="cy-img-list three">
                               <a href="${frontSelfOperateCreative.bannerPath1 }"  target="_blank" >
                                   <img src="${frontSelfOperateCreative.bannerShowPath1}">
                               </a>
                               <a href="${frontSelfOperateCreative.bannerPath2 }"  target="_blank" >
                                   <img src="${frontSelfOperateCreative.bannerShowPath2}">
                               </a>
                               <a href="${frontSelfOperateCreative.bannerPath3 }"  target="_blank" >
                                   <img src="${frontSelfOperateCreative.bannerShowPath3}">
                               </a>
                           </div>
                       </c:otherwise>
                   </c:choose>
                </div>
            </div>
        </div>

    </c:if>

     <c:if test="${frontSelfOperateCreative.type == 4 }">
        <div class="cy-item col-sm-4">
            <div  class="panel b-a cy-materials-item">
                <div class="panel-heading bg text-lt"  >
                    <span>${frontSelfOperateCreative.creativeName}</span>
                    <span class="pull-right del-icon-cy">
                        <a  href="javascript:delectCreative(${frontSelfOperateCreative.id })" <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>>
                            <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                        </a>
                    </span>
                </div>
                <div class="content">
                    <div class="cy-img-list one mt">
                        <a href="${frontSelfOperateCreative.bannerPath1 }"  target="_blank" >
                            <img src="${frontSelfOperateCreative.bannerShowPath1}">
                        </a>
                    </div>
                </div>
            </div>
        </div>
     </c:if>


    <%--<c:if test="${frontSelfOperateCreative.type == 1 }">
        <div class="cy-item col-sm-4">
            <div class="panel b-a cy-materials-item">
                <div class="panel-heading bg text-lt"  >
                    <span>${frontSelfOperateCreative.creativeName}</span>
                    <span class="pull-right">
                        <a  href="javascript:delectCreative(${crtSizeMediumMenu.id })">
                            <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                        </a>
                    </span>
                </div>
                <div class="content">
                    <div class="sb">
                        <img src="${frontSelfOperateCreative.trademarkPath}" class="sb-icon">
                        <span class="sb-name">${frontSelfOperateCreative.trademarkName}</span>
                    </div>
                    <p class="cy-txt">
                            ${frontSelfOperateCreative.creativeCopywriter}
                    </p>
                    <div class="cy-img-list three">
                        <img src="${frontSelfOperateCreative.bannerPath1}">
                        <img src="${frontSelfOperateCreative.bannerPath2}">
                        <img src="${frontSelfOperateCreative.bannerPath3}">
                    </div>
                </div>
            </div>
        </div>
    </c:if>--%>

       <c:if test="${frontSelfOperateCreative.type == 5 }">
        <div class="cy-item col-sm-4">
            <div class="panel b-a cy-materials-item">
                <div class="panel-heading bg text-lt"  >
                    <span>${frontSelfOperateCreative.creativeName}</span>
                    <span class="pull-right del-icon-cy">
                        <a  href="javascript:delectCreative(${frontSelfOperateCreative.id })" <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>>
                            <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                        </a>
                    </span>
                </div>
                <div class="content">
                    <div class="sb">
                        <span class="sb-name">${frontSelfOperateCreative.trademarkName}</span>
                    </div>
                    <p class="cy-txt">
                            ${frontSelfOperateCreative.creativeCopywriter}
                    </p>
                    <c:choose>
                        <c:when test="${empty frontSelfOperateCreative.bannerPath2 }">
                            <div class="cy-img-list one">
                                <a href="${frontSelfOperateCreative.bannerShowPath1 }"  target="_blank" >
                                    <img src="${frontSelfOperateCreative.bannerPath1}">
                                </a>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div class="cy-img-list three">
                                <a href="${frontSelfOperateCreative.bannerShowPath1 }"  target="_blank" >
                                    <img src="${frontSelfOperateCreative.bannerPath1}">
                                </a>
                                <a href="${frontSelfOperateCreative.bannerShowPath2 }"  target="_blank" >
                                    <img src="${frontSelfOperateCreative.bannerPath2}">
                                </a>
                                <a href="${frontSelfOperateCreative.bannerShowPath3 }"  target="_blank" >
                                    <img src="${frontSelfOperateCreative.bannerPath3}">
                                </a>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
    </c:if>

    <c:if test="${frontSelfOperateCreative.type == 3 }">
        <div class="cy-item col-sm-4">
            <div class="panel b-a cy-materials-item">
                <div class="panel-heading bg text-lt"  >
                    <span>${frontSelfOperateCreative.creativeName}</span>
                    <span class="pull-right del-icon-cy">
                        <a  href="javascript:delectCreative(${frontSelfOperateCreative.id })" <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>>
                            <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                        </a>
                    </span>
                </div>
                <div class="content">
                    <div class="sb no-lineHeight">
                        <a href="${frontSelfOperateCreative.sharePath }"  target="_blank" >
                            <img src="${frontSelfOperateCreative.shareShowPath}" class="sb-icon">
                        </a>
                        <div class="sb-name-container have-desc-sbName">
                            <p class="sb-name">${frontSelfOperateCreative.shareTitle}</p>
                            <p class="sb-desc">${frontSelfOperateCreative.shareDescribe}</p>
                        </div>
                    </div>
                    <p class="cy-txt">
                            ${frontSelfOperateCreative.creativeCopywriter}
                    </p>
                    <div class="cy-img-list one">
                        <a href="${frontSelfOperateCreative.bannerPath1 }"  target="_blank" >
                            <img src="${frontSelfOperateCreative.bannerShowPath1}">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </c:if>

   <%-- <c:if test="${frontSelfOperateCreative.type == 5 }">
        <div class="cy-item col-sm-4">
            <div class="panel b-a cy-materials-item">
                <div class="panel-heading bg text-lt"  >
                    <span>${frontSelfOperateCreative.creativeName}</span>
                    <span class="pull-right">
                        <a  href="javascript:delectCreative(${frontSelfOperateCreative.id })">
                            <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                        </a>
                        &lt;%&ndash;<a name="editButton" data-toggle="modal" data-target="#editCreatives" >
                            <i class="fa fa-pencil-square-o m-l-sm materials-action-icon"></i>
                        </a>&ndash;%&gt;
                    </span>
                </div>
                <div class="content">
                    <div class="sb">
                        <span class="sb-name">${frontSelfOperateCreative.trademarkName}</span>
                    </div>
                    <p class="cy-txt">
                            ${frontSelfOperateCreative.creativeCopywriter}
                    </p>
                    <div class="cy-img-list three">
                        <img src="${frontSelfOperateCreative.bannerPath1}">
                        <img src="${frontSelfOperateCreative.bannerPath2}">
                        <img src="${frontSelfOperateCreative.bannerPath3}">
                    </div>
                </div>
            </div>
        </div>
    </c:if>--%>

    <c:if test="${frontSelfOperateCreative.type == 2 }">
        <div class="cy-item col-sm-4">
            <div class="panel b-a cy-materials-item">
                <div class="panel-heading bg text-lt"  >
                    <span>${frontSelfOperateCreative.creativeName}</span>
                    <span class="pull-right del-icon-cy">
                    <a  href="javascript:delectCreative(${frontSelfOperateCreative.id })" <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>>
                        <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                    </a>
                    <%--<a name="editButton" data-toggle="modal" data-target="#editCreatives" >
                        <i class="fa fa-pencil-square-o m-l-sm materials-action-icon"></i>
                    </a>--%>
                </span>
                </div>
                <div class="content">
                    <p class="cy-txt mt">
                            ${frontSelfOperateCreative.creativeCopywriter}
                    </p>
                    <div class="cy-img-list one mt">
                        <a href="${frontSelfOperateCreative.bannerPath1 }"  target="_blank" >
                            <img src="${frontSelfOperateCreative.bannerShowPath1}">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </c:if>
        </c:forEach>


    </div>




    <div class="text-center">
        <airad:pagination pageSize="${form.page.pageSize }"
                          href="/front_creatives/index?pageNumber=PAGENUM
			&crtSizeMediumMenuId=${form.crtSizeMediumMenuId }"
                          totalRecord="${form.page.totalCount }"
                          currentPage="${form.page.pageNumber }"
        >
        </airad:pagination>
    </div>
</form>
<script type="text/javascript">   

    //图片大小自适应
   /* $('div.panel-body.p-v-md img').load(function() {
        adjustImgSize($(this), $(this).parent().width(), $(this).parent().height());
    });*/
    //删除物料
    function delectCreative(creativeId){
        $.ajax({
            url: "/front_creatives/delete",
            type: "POST",
            data:{id:creativeId},
            dataType: "json",
            cache: false,
            success: function(data) {
                if(data=="success"){
                    showMsg("success","创意删除成功！");
                    setTimeout("location.reload()", 1000);
                }else{
                    bootbox.dialog({
                        title:"删除创意提示",
                        message:"创意在使用中，无法删除。",
                        buttons:{
                            "success":{
                                "label" : "<i class='icon-ok'></i> 确定",
                                "className":"btn-sm btn-primary",
                                "callback" : function() {
                                }
                            }
                        }
                    });
                }
            }
        });
//        window.location.reload().delay(2000);
    }

    $().ready(function() {
        $("div[name=showOrhide]").hover(over, out)
        function over() {
            $(this).find("span").show()
        }

        function out() {
            $(this).find("span").hide();
        }
        //根据尺寸查询
        $("#creativesForm").change(function(){
            $("#creativesForm").submit();
        })

        //打开新建广告创意
        $("#newCreativesButton").click(function () {
            //显示弹窗
            $.ajax({
                url: "/ajax/front_creatives/add",
                type: "GET",
                dataType: 'HTML',
                success: function (data) {
                    $("#newCreatives").html(data);
                    $("#newCreatives").modal("show");
                }
            });
        });
    })

</script>
<script type="text/javascript"  src="/js/plugins/uploader/jquery.uploadify.js"></script>
</body>
</html>